import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
    install (app:App) {
        //创建一个自定义指令用于图片懒加载
        app.directive('lazyImg',{
            //监控图片是否进入可视局域
            mounted(dom,obj){
                console.log('dom',dom)
                console.log('obj',obj)
                const { stop } = useIntersectionObserver(
                    dom,
                    ([{ isIntersecting }]) =>{
                        if (isIntersecting) {
                            dom.src = obj.value
                            //图片出错时使用的图片
                            dom.onerror = function () {
                                dom.src = defaultImg
                            }
                            stop()
                        }
                    }
                )
            }
        })
    }
}